<template>
	<view>
		<UserInfoCard></UserInfoCard>
		<view class="page-container">

			<view class="type-select">
				<view class="slect-item">
					<view class="item-name">住院院区</view>
					<view class="flex-start">
						<view>{{form.campusName}}</view>
						<view class="select-text" @click="showCampus=true">请选择 ></view>
					</view>
				</view>
				<view class="slect-item">
					<view class="item-name">住院科室</view>
					<view class="flex-start">
						<view>{{form.departmentName}}</view>
						<view class="select-text" @click="showDepartment=true">请选择 ></view>
					</view>
				</view>
				<view class="slect-item">
					<view class="item-name">门诊病历</view>
					<view class="flex-start">
						<view>{{form.emrName}}</view>
						<view class="select-text" @click="openRecordSelect">请选择 ></view>
						<!-- @click="toPage('/pages/Home/ServeHospital/beInHospital/patientRecord')" -->
					</view>
				</view>
				<!-- <view class="slect-item">
					<view class="item-name">检验检查</view>
					<view class="flex-start">
						<view>{{form.emrName}}</view>
						<view class="select-text" @click="showMedicalTechnology=true">请选择 ></view>
					</view>
				</view> -->
				<!-- 				<view class="slect-item">
					<view class="item-name">入院日期</view>
					<view class="flex-start">
						<view>{{form.reservationInTime}} {{form.week}}</view>
						<view class="select-text" @click="showDate=true">请选择 ></view>
					</view>
				</view> -->
				<view>
					<view class="item-name mar-10-0">入院描述</view>
					<u-input v-model="form.reason" :type="type" :border="true" :height="100" :auto-height="true" />
				</view>
			</view>
			<view class="date-select">

			</view>
			<view class="confirm-btn-row">
				<view class="confirm-btn" @click="openDialog">确认预约</view>
			</view>
			<view>
				<view v-for="(item,index) in dataSource" class="item">
					<view class="start-center">
						<view class="item-title">预约院区</view>
						<view>{{item.campusName}}</view>
					</view>
					<view class="start-center">
						<view class="item-title">住院科室</view>
						<view>{{item.departmentName}}</view>
					</view>
<!-- 					<view class="between center">
						<view class="start-center">
							<view class="item-title">入院日期</view>
							<view>{{item.reservationInTime}}</view>
						</view>
						<view>{{item.status==1?'通过':'失败'}}</view>
					</view>
					<view class="start-center">
						<view class="item-title">预约日期</view>
						<view>{{item.createTime}}</view>
					</view> -->
					<view class="start-center" v-if="item.reason">
						<view class="item-title">入院原因</view>
						<view>{{item.reason}}</view>
					</view>
				</view>
			</view>
			<!-- 院区选择 -->
			<u-select v-model="showCampus" v-if="hospitalInfo.length>0" :default-value="defaultValueCampus"
				:list="hospitalInfo" @confirm="changeCampus"></u-select>
			<!-- 科室选择 -->
			<u-select v-model="showDepartment" v-if="listDepartment.length>0" :default-value="defaultValueDepartment"
				:list="listDepartment" @confirm="changeDepartment"></u-select>
			<!-- 门诊病历 -->
			<u-select v-model="showMedicalRecord" v-if="listMedicalRecord.length>0"
				:default-value="defaultValueMedicalRecord" :list="listMedicalRecord"
				@confirm="changeMedicalRecord"></u-select>
			<u-select v-model="showMedicalTechnology" v-if="listMedicalTechnology.length>0"
				:default-value="defaultValueMedicalTechnology" :list="listMedicalTechnology"
				@confirm="changeMedicalTechnology"></u-select>
			<u-calendar v-model="showDate" :mode="mode" @change="changeDate" :min-date="minDate"
				:max-date="maxDate"></u-calendar>
			<Dialog :show="showDialog" @confirm="confirm" @close="close" title="温馨提示" :mask-close-able="true">
				<view class="slot-content">
					<view class="text-center">
						<rich-text :nodes="'是否预约？'"></rich-text>
					</view>
				</view>
			</Dialog>

		</view>
	</view>
</template>

<script>
	import UserInfoCard from '../../../components/UserInfo/UserInfoCard.vue'
	import {
		departmentSelect
	} from '../../../api/department'
	import {
		patientMedicalRecordReport
	} from '../../../api/patientMedicalRecord'
	import {
		medicalTechnologyReport
	} from '../../../api/medicalTechnology'
	import {
		inHospitalReservationAdd,
		inHospitalReservationSelect
	} from '../../../api/inHospitalReservation'
	import {
		mapGetters,
	} from 'vuex'
	import {
		dateFormat
	} from '../../../utils/assist'
	import Dialog from '../../../components/Dialog/Dialog.vue'
	export default {
		components: {
			UserInfoCard,
			Dialog
		},
		computed: {
			...mapGetters(['hospitalInfo', "userInfo"]),
			maxDate() {
				let date = new Date();
				date.setDate(date.getDate() + 10)
				return dateFormat("yyyy-MM-dd", date)
			}
		},
		data() {
			return {
				defaultValueCampus: [], //默认下拉选中医院名称
				showCampus: false,

				defaultValueDepartment: [],
				listDepartment: [],
				showDepartment: false,

				showMedicalRecord: false,
				defaultValueMedicalRecord: [], //默认选择门诊病历
				listMedicalRecord: [{
					label: "无",
					value: "00"
				}], //门诊病历数据

				showMedicalTechnology: false,
				defaultValueMedicalTechnology: [], //默认选择那个检验检查
				listMedicalTechnology: [], //检验检查数据

				showDate: false,
				mode: 'date',
				minDate: dateFormat("yyyy-MM-dd", new Date()),
				form: {
					campusCode: ""
				}, //选择的数据
				showDialog: false,
				dataSource: [], //预约的记录
				type: "textarea",
			}
		},
		mounted() {
			this.form.campusCode = this.userInfo.campusCode
			this.init();
		},
		methods: {
			init() {
				this.defaultValueCampus = []
				if (this.hospitalInfo) {
					for (var i = 0; i < this.hospitalInfo.length; i++) {
						this.hospitalInfo[i].value = this.hospitalInfo[i].code
						this.hospitalInfo[i].label = this.hospitalInfo[i].name
						if (this.hospitalInfo[i].code == this.form.campusCode) {
							this.defaultValueCampus.push(i)
						}
					}
				}
				inHospitalReservationSelect({
					patId: this.userInfo.patId,
					orderBy: "id desc"
				}).then(res => {
					console.log(res)
					this.dataSource = res;
				})
			},
			getDepartment() {
				this.defaultValueDepartment = []
				// 得到所有住院科室
				departmentSelect({
					departmentType: "01",
					campusCode: this.form.campusCode
				}).then(res => {
					console.log(res)
					let map = new Map();
					for (let obj of res) {
						map.set(obj.parentCode, obj)
					}
					map.forEach((v, k) => {
						let list = []
						v.value = v.code
						v.label = v.name
						for (var i = 0; i < res.length; i++) {
							if (res[i].code.startsWith(k)) {
								let item = {
									...res[i]
								}
								item.value = item.code
								item.label = item.name
								list.push(item);
							}
						}
						v.children = list;
					})
					console.log(map)
					this.listDepartment = [...map].map(item => item[1])
					for (var i = 0; i < this.listDepartment.length; i++) {
						if (this.listDepartment[i].code == this.form.departmentCode) {
							this.defaultValueDepartment.push(i)
						}
					}
				})
			},
			selectDate(index) {
				if (!this.dateList[index].hasBed) return;
				this.selectedDateIndex = index;
			},
			changeCampus(e) {
				this.form.campusCode = e[0].value;
				this.form.campusName = e[0].label;
				this.init()
				this.getDepartment();

			},
			changeDepartment(e) {
				this.form.departmentCode = e[0].value;
				this.form.departmentName = e[0].label;
				this.getDepartment();
				// 选择完科室，查询该患者病历
				// this.getMedicalRecord()
				// 同时查询检验检查报告
				// this.getMedicalTechnology();
			},
			openRecordSelect() {
				this.showMedicalRecord = true;
			},
			getMedicalRecord() {
				patientMedicalRecordReport({
					cardType: "1",
					cardNo: this.userInfo.patId
				}).then(res => {
					console.log(res)
				})
			},
			// 得到所有检验检查数据
			getMedicalTechnology() {
				medicalTechnologyReport({
					patId: this.userInfo.patId,
				}).then(res => {
					console.log(res)
				})
			},
			changeMedicalRecord(e) {
				console.log(e)
			},
			changeMedicalTechnology(e) {
				console.log(e)
			},
			changeDate(e) {
				console.log(e)
				this.form.reservationInTime = e.result
				this.form.week = e.week
			},
			openDialog() {
				if (!this.form.campusName) {
					this.$u.toast('请选择院区')
					return;
				}
				if (!this.form.departmentName) {
					this.$u.toast('请选择科室')
					return;
				}
				// if (!this.form.reservationInTime) {
				// 	this.$u.toast('请选择入院日期')
				// 	return;
				// }
				this.userInfo.id = null;
				this.form = {
					...this.form,
					...this.userInfo
				}
				this.form.status = 0

				this.showDialog = true;
			},
			confirm() {
				if (!this.userInfo) {
					this.$u.toast('请选择就诊卡')
					return;
				}
				inHospitalReservationAdd(this.form).then(res => {
					this.init()
				})
				this.showDialog = false;
			},
			close() {
				this.showDialog = false;
			},
			toPage(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		min-height: calc(100vh - 50px);
		padding: 0 16rpx;
	}

	.type-select {
		margin-top: 20rpx;
		padding: 40rpx 40rpx 0;
		background: #fff;
		border-radius: 16rpx;
	}

	.slect-item {
		display: flex;
		justify-content: space-between;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #dddbdb;
		margin-bottom: 20rpx;

		&:last-child {
			border-bottom: none;
		}
	}

	.item-name {
		font-size: 30rpx;
	}

	.select-text {
		color: #888;
		margin-left: 10px;
	}

	.date-select {
		display: flex;
		justify-content: space-between;
		margin: 40rpx 0 0 0;
	}

	.date-item {
		flex: 1;
		margin: 0 4rpx;
		background: #f8faff;
		border-radius: 12rpx;
		padding: 10rpx 0 10rpx 0;
		text-align: center;
		color: #888;
		transition: background 0.2s, color 0.2s;
		position: relative;
		cursor: pointer;
		border: 2rpx solid transparent;
	}

	.date-item.active {
		background: #e6f0ff;
		color: #1ec6e6;
		border-color: #23d3d3;
	}

	.date-item.full {
		color: #ccc;
		background: #f5f5f5;
		pointer-events: none;
	}

	.date-week {
		font-size: 24rpx;
		margin-bottom: 4rpx;
		white-space: pre-line;
	}

	.date-day {
		font-size: 28rpx;
		font-weight: bold;
	}

	.date-status {
		margin-top: 8rpx;
		font-size: 22rpx;
		border-radius: 8rpx;
		padding: 2rpx 12rpx;
		display: inline-block;
	}

	.date-status.has-bed {
		background: #1ec6e6;
		color: #fff;
	}

	.date-status.no-bed {
		background: #eee;
		color: #bbb;
	}

	.confirm-btn-row {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
	}

	.confirm-btn {
		width: 90%;
		height: 80rpx;
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 28rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 80rpx;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item {
		padding: 18rpx 16rpx;
		display: flex;
		flex-direction: column;
		box-shadow: 0 5px 1000px 1rpx #e0e2e7;
		margin: 16rpx 0;
		border-radius: 10px;
		background-color: white;

		.item-title {
			margin-right: 10px;
			line-height: 30px;

			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #999999;
			text-align: left;
			font-style: normal;
			text-transform: none;

		}
	}
</style>